<template>
  <view class="container">
    <scroll-view class="nav" :show-scrollbar="false" scroll-x="true" :scroll-into-view="scrollViewId" scroll-with-animation>
      <view
        v-for="(tab, index) in tabs"
        :key="tab.value"
        :id="`nav-item_${index}`"
        class="nav-item"
        :class="[`nav-item_${index}`, { active: tab.value === current }]"
        @click="onChange(tab.value, $event)"
      >
        <view>{{ tab.label }}</view>
      </view>
    </scroll-view>
    <view class="main">
      <template v-if="list.length > 0">
        <view v-for="order in list" :key="order.id" class="item">
          <OrderCard :data="order" @update="getOrderList" />
        </view>
      </template>
      <view v-else class="empty">
        <Empty />
      </view>
    </view>

    <Tabbar />
  </view>
</template>

<script setup>
import { nextTick, onMounted, ref } from 'vue'
import OrderCard from './OrderCard.vue'
import Tabbar from '@/components/Tabbar/index.vue'
import Empty from '@/components/Empty/index.vue'
import { orderList } from '@/service/order'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { OrderStatus, OrderStatusLabel } from '@/utils/constants'

// 定义 tab 顺序
const order = [OrderStatus.UNIFIED, OrderStatus.UNPAID, OrderStatus.UNVERIFIED, OrderStatus.VERIFIED, OrderStatus.CANCELLED, OrderStatus.FINISHED, OrderStatus.UNDELIVERED, OrderStatus.DELIVERED].map(
  (e) => OrderStatusLabel[e]
)
const originalTabs = Object.entries(OrderStatusLabel).map(([value, label]) => ({
  label,
  value: Number(value),
}))
const tabs = originalTabs.filter((item) => order.includes(item.label)).sort((prev, cur) => order.indexOf(prev.label) - order.indexOf(cur.label))

const current = ref(OrderStatus.UNIFIED)
const list = ref([])
const scrollViewId = ref('')

const getOrderList = async (data) => {
  const res = await orderList(data)
  list.value = res.data || []
}

function _isFullIntersecting(rect) {
  const { left, width } = rect
  const { windowWidth } = uni.getWindowInfo() || {}
  return left + width < windowWidth && left >= 0
}

function onChange(index, e) {
  const nextScrollViewId = `.nav-item_${index}`
  getOrderList({
    status: index,
  })
  uni
    .createSelectorQuery()
    .select(nextScrollViewId)
    .boundingClientRect((data) => {
      if (!_isFullIntersecting(data)) {
        if (scrollViewId.value === nextScrollViewId) {
          // NOTE: 重新修改 scrollViewId 来强制触发视图更新，这样可以强制滚动到目标节点
          scrollViewId.value = ''
          nextTick(() => {
            scrollViewId.value = nextScrollViewId
          })
        } else {
          scrollViewId.value = nextScrollViewId
        }
      } else {
        scrollViewId.value = ''
      }
    })
    .exec()
  if (current.value === index) return
  current.value = index
}

onShow(() => {
  uni.hideTabBar()
  getOrderList({
    status: current.value,
  })
})

onLoad((options) => {
  current.value = +options.current || getApp().globalData.orderStatus || 0
})
</script>

<style lang="scss">
$gap-x: 28rpx;

.container {
  min-height: 100vh;
  background: $body-bc;
  color: $content-color;
  padding-bottom: 140rpx;

  .main {
    padding: 26rpx $gap-x;

    .item + .item {
      margin-top: 22rpx;
    }

    .empty {
      padding-top: 158rpx;
    }
  }
}

.nav {
  white-space: nowrap;
  width: 100%;
}

.nav-item {
  position: relative;
  display: inline-block;
  text-align: center;
  padding: 12rpx $gap-x;
  font-size: 28rpx;
  border-bottom: 1rpx solid $border-color;

  &:first-child {
    margin-left: $gap-x;
  }

  &:last-child {
    margin-right: $gap-x;
  }

  &.active {
    color: $title-color;

    &::after {
      content: '';
      position: absolute;
      bottom: -4rpx;
      left: 0;
      display: block;
      width: 100%;
      height: 6rpx;
      background-color: $primary-color;
    }
  }
}
</style>
